<template>
	<div class="deposition-modal-wrapper">
		<el-dialog custom-class="deposition-dialog" :title="getModalTitle" :visible.sync="showDepositionModal" :before-close="cancelSubmit" :close-on-click-modal="false">
			<div class="add-deposition-warpper">
				<el-input
					type="textarea"
					resize="none"
					id="testimony-input"
					placeholder="请输入抄录证言"
					v-model="content"
					show-word-limit
					:maxlength="30"
					:max="30"
					@keyup.native="prevent($event)"
					onkeydown="if (event.keyCode===13){return false;}"
				>
				</el-input>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelSubmit">取 消</el-button>
				<el-button type="primary" @click="submitDeposition">确 定</el-button>
			</span>
			<p class="error-message" v-show="isError">* 请输入抄录证言</p>
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: {
		showDepositionModal: {
			type: Boolean,
			default: () => false
		},
		mode: {
			type: String,
			default: () => 'add'
		},
		depostionContent: {
			type: String,
			default: () => ''
		}
	},
	computed: {
		getModalTitle() {
			return this.mode === 'add' ? '添加抄录证言' : '修改抄录证言';
		}
	},
	mounted() {
		this.content = this.depostionContent;
	},
	data() {
		return {
			content: '',
			isError: false
		};
	},
	methods: {
		submitDeposition() {
			if (this.content.trim() === '') {
				this.isError = true;
				return;
			}
			this.isError = false;
			this.$emit('submitDeposition', this.content);
			this.content = '';
		},
		cancelSubmit() {
			this.content = '';
			this.isError = false;
			this.$emit('cancelSubmit');
		},
		prevent(event) {
			let keynum = window.event ? event.keyCode : event.which;
			if (keynum === 13) {
				event.preventDefault();
				this.submitDeposition();
			}
		}
	}
};
</script>

<style lang="less" scoped>
.deposition-modal-wrapper {
	.add-deposition-warpper {
		height: 220px;
		textarea {
			height: 100%;
		}
	}
	.error-message {
		color: #f56c6c;
	}
}
</style>

<style lang="less">
.deposition-modal-wrapper {
	.add-deposition-warpper {
		width: 310px;
		height: 120px;
		background: #ffffff;
		border: 1px solid #eeeeee;
		border-radius: 4px;
		textarea {
			height: 220px;
		}
	}
}
.deposition-dialog {
	width: 366px !important;
	background: #ffffff !important;
	border-radius: 4px !important;
	.el-dialog__header {
		border-bottom: 1px solid #eeeeee !important;
	}
	.el-dialog__body {
		padding: 14px 18px !important;
		.add-deposition-warpper {
			width: 330px !important;
			height: 140px !important;
			background: #ffffff !important;
			border: 1px solid #eeeeee !important;
			border-radius: 4px !important;
			.el-textarea {
				height: 100% !important;
				textarea {
					height: 100% !important;
				}
			}
		}
	}
}
</style>
